<template>
	<div class="h-full bg-white">
		<a-card :bordered="false">
			<div class="flex gap-4">
				<!-- <a-image :width="80" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" /> -->
				<a-avatar shape="square" :size="64">
					<template #icon><UserOutlined /></template>
				</a-avatar>
				<div class="text-left">
					<div class="my-[6px]">
						<span v-if="detailData.signMethod === '0'" class="relative top-[2px] mr-[12px]">{{
							detailData.contractTemplateName || '-'
						}}</span>
						<a-tag color="#108ee9" class="h-[24px]">{{
							$TOOL.dictTypeData('ORDER_STATUS', detailData.orderStatus)
						}}</a-tag>
					</div>
					<div>{{ detailData.orderNo || '-' }}</div>
				</div>
			</div>

			<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] mt-6 pl-2">基本信息</div>
			<div class="flex text-left pt-4">
				<div class="flex-1">
					<div class="text-gray-500">合同编号</div>
					<div>{{ detailData.contractNo || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">甲方抬头</div>
					<div>{{ detailData.firstParty || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">乙方抬头</div>
					<div>{{ detailData.secondPartyName || '-' }}</div>
				</div>
				<div class="flex-[1]">
					<div class="text-gray-500">付款类型</div>
					<div>{{ $TOOL.dictTypeData('PAYMENT_METHOD', detailData.paymentMethod) }}</div>
				</div>
			</div>

			<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] mt-6 pl-2">订单信息</div>
			<div class="flex text-left pt-4">
				<div class="flex-1">
					<div class="text-gray-500">订单编号</div>
					<div>{{ detailData.orderNo || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">业务类型</div>
					<div>{{ $TOOL.dictTypeData('BUSINESS_TYPE', detailData.businessType) }}</div>
				</div>
				<div class="flex-[2]">
					<div class="text-gray-500">服务类目</div>
					<div>
						{{ `${detailData.serviceClassName} -> ${detailData.serviceTypeName} -> ${detailData.serviceProjectName}` }}
					</div>
				</div>
			</div>
			<div class="flex text-left pt-4">
				<div class="flex-1">
					<div class="text-gray-500">订单金额</div>
					<div>{{ detailData.orderAmount ?? '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">定金金额</div>
					<div>{{ detailData.paymentMethod === 'FULL' ? '-' : detailData.depositAmount ?? '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">尾款金额</div>
					<div>{{ detailData.paymentMethod === 'FULL' ? '-' : detailData.balancePayment ?? '-' }}</div>
				</div>
				<div class="flex-1"></div>
			</div>
			<div class="flex text-left pt-4">
				<div class="flex-1">
					<div class="text-gray-500">服务时长</div>
					<div>{{ detailData.serviceLife || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">赠送时长</div>
					<div>{{ detailData.giveMonth || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">开始服务月</div>
					<div>{{ detailData.serviceStime || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">结束服务月</div>
					<div>{{ detailData.serviceEtime || '-' }}</div>
				</div>
			</div>

			<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] mt-6 pl-2">其他信息</div>
			<div class="flex text-left pt-4">
				<div class="flex-1">
					<div class="text-gray-500">订单来源</div>
					<div>{{ detailData.orderFrom || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">签约方式</div>
					<div>{{ signMethodEnum[detailData.signMethod] }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">签约场景</div>
					<div>{{ $TOOL.dictTypeData('SignPayment', detailData.signPayment) }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">签约人</div>
					<div>{{ detailData.secondPartyPerson || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">创建人</div>
					<div>{{ detailData.createUserName || '-' }}</div>
				</div>
			</div>
			<div class="flex text-left pt-4">
				<div class="flex-1">
					<div class="text-gray-500">创建时间</div>
					<div>{{ detailData.createAt || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">付款时间</div>
					<div>{{ detailData.paymentDate || '-' }}</div>
				</div>
				<div class="flex-1"></div>
				<div class="flex-1"></div>
			</div>

			<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] mt-6 pl-2">
				订单转换信息
			</div>
			<div class="flex text-left pt-4">
				<div class="flex-1">
					<div class="text-gray-500">订单转换时间</div>
					<div>{{ detailData.transTime || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">订单转换人</div>
					<div>{{ detailData.transUserName }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">订单可转换金额</div>
					<div>{{ detailData.transAmount }}</div>
				</div>
				<div class="flex-1"></div>
			</div>
		</a-card>
	</div>
</template>
<script setup name="orderDetail">
	import customerOrderApi from '@/api/biz/customerOrderApi'
	import { useRoute } from 'vue-router'
	import signPayment from '@/views/biz/order/enum/signPayment'
	import orderStatus from '@/views/biz/order/enum/orderStatus'
	import { signMethodEnum } from '../contractManagement/enum/contractEnum'

	const route = useRoute()

	const detailData = ref({})

	onMounted(() => {
		customerOrderApi.customerOrderDetail(route.query).then((data) => {
			detailData.value = data
		})
	})

	const isOnlinePaid = computed(() => {
		return detailData.signPayment === signPayment.OnlineSignedPaid && detailData.orderStatus === orderStatus.PAID
			? '是'
			: '否'
	})
</script>
